/**
 * 参考https://webpack.docschina.org/concepts/#%E5%85%A5%E5%8F%A3-entry-
 */

const path = require('path'); // path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 自动打成dist目录的index.html

//const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清理/dist目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 清理/dist目录,新版的写法


module.exports = {
  
    // 入口：不配，默认值是 ./src/index.js
    //entry: './src/index.js', //单输出
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    // 输出: 告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。
    output: {
        // 主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
        path: path.resolve(__dirname, 'dist'), //webpack.config.js的路径是__dirname，要找到dist目录即。root的默认值就是__dirname
        // 通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。
        //filename: 'my-first-webpack.bundle.js' // filename: 'bundle.js',
        //filename: 'main.js',
        filename: '[name].bundle.js' // 根据entry指定的入口动态输出多文件
    },
    // loader :webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
    module: {
      rules: [
        // 在 webpack 的配置中 loader 有两个属性
        // test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
        // use 属性，表示进行转换时，应该使用哪个 loader。
        // webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先 使用 raw-loader 转换一下。
        //{ test: /\.txt$/, use: 'raw-loader' }
        // 所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader
        { test: /\.css$/, use: ['style-loader','css-loader'] },
        // 字体加载
        { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] },
        // csv文件和xml文件加载
        { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
        { test: /\.xml$/, use: ['xml-loader'] },
        // 图片加载
        { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }
      ]
    },
    // 插件: loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
    plugins: [ // 插件列表https://webpack.docschina.org/plugins
      
      // html-webpack-plugin 为应用程序生成 HTML 一个文件，并自动注入所有生成的 bundle
      //new HtmlWebpackPlugin({template: './src/index.html'})
      new HtmlWebpackPlugin({title: '管理输出'}), //dist目录生成一个标题为管理输出的index.html

      new CleanWebpackPlugin() // 清理/dist 目录。每次打包生成新的 // 自定义删除参考https://www.jianshu.com/p/dd67a3b64b62
    ],
    module: {
      rules: [
        // 在 webpack 的配置中 loader 有两个属性
        // test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
        // use 属性，表示进行转换时，应该使用哪个 loader。
        // webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先 使用 raw-loader 转换一下。
        //{ test: /\.txt$/, use: 'raw-loader' }
        // 所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader
        { test: /\.css$/, use: ['style-loader','css-loader'] },
        // 字体加载
        { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] },
        // csv文件和xml文件加载
        { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
        { test: /\.xml$/, use: ['xml-loader'] },
        // 图片加载
        { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }
      ]
    }
};